<!DOCTYPE html>
<html lang="an">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title></title>
    <link rel="stylesheet" href="../css/login_style.css">

        <style>
        .bg {
            position: fixed; /* 指定背景图为固定定位，不随页面滚动 */
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: -1; /* 使背景图片处于最底层 */
            background-size: cover; /* 缩放背景图以填充满整个容器 */
            background-position: center center; /* 将背景图居中显示 */
            background-repeat: no-repeat;
        }
        .row {
            margin: 0;
            height: 100vh; /* 设置行的高度，占满整个可视区域 */
            display: flex; /* 开启flex布局 */
            align-items: center; /* 沿横轴居中显示 */
        }
        .form {
            margin: 0 auto; /* 将表单左右居中 */
            width: 400px;
        }
        </style>

</head>
<body>
<div id="app">
    <div class="bg" :style="{backgroundImage: 'url(' + bgImage + ')'}">
        <!-- 通过设置背景图片的样式类 bg 来实现背景图居中显示，:style 用来设置行样式，backgroundImage 是背景图位置 -->
        <el-row class="row" justify="center">
            <!-- justify 用来设置行内元素水平方向的对齐方式为居中 -->
            <el-col :span="16" :lg="{span: 12}" :md="{span: 18}" :xs="{span: 22}">
                <!-- el-col 在不同设备尺寸下展示的宽度不同，:span 对应展示的宽度，:lg :md :xs 则代表不同的设备 -->
                <el-form  ref="form" :rules="rules" status-icon :model="form" label-width="80px" class="form">
                    <!-- el-form 提供表单的能力，ref 和 :model 是绑定 form 的，:rules 表示表单校验需要的信息，label-width 表示标题宽度，class 为 form 是为了设置表单的居中对齐 -->
                    <el-form-item label="用户名" prop="username">
                        <!-- el-form-item 是表单的项，label 是显示的标题，prop 是对应的从表单中获取对应值的字段名 -->
                        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                        <!-- el-input 组件提供单行文本框，v-model 是数据绑定，placeholder 可以设置输入框内的提示信息 -->
                    </el-form-item>
                    <el-form-item label="用户密码" prop="password">
                        <el-input v-model="form.password" type="password" placeholder="请输入用户密码"></el-input>
                        <!-- type 属性为 password 表示输入框中输入的文字会被隐藏 -->
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirm">
                        <el-input v-model="form.confirm" type="password" placeholder="请再次输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="用户性别" prop="gender">
                        <el-radio-group v-model="form.gender">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="用户年龄" prop="age">
                        <el-input type="number" v-model.number="form.age" placeholder="请输入年龄"></el-input>
                        <!-- type 属性为 number，表示输入框只能输入数字 -->
                    </el-form-item>
                    <el-form-item label="用户邮箱" prop="email">
                        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="用户电话" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入电话号码"></el-input>
                    </el-form-item>
                    <el-form-item label="用户地址" prop="address">
                        <el-input v-model="form.address" placeholder="请输入地址"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">立即注册</el-button>
                        <!-- el-button 组件可以直接作为提交按钮，type 表示按钮类型，@click 代表点击事件，submitForm 是事件处理方法名 -->
                        <el-button @click.prevent="resetForm">重置</el-button>
                        <!-- prevent 属性表示阻止事件冒泡 -->
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                bgImage: 'https://picsum.photos/1920/1080', //背景图片
                form: { // 表单数据
                    username: '',
                    password: '',
                    confirm: '',
                    gender: '',
                    age: '',
                    email: '',
                    phone: '',
                    address: ''
                },
                rules: { //表单校验规则
                    username: [{required: true, message: '用户名不能为空'}],
                    password: [{required: true, message: '用户密码不能为空'}],
                    confirm: [{required: true, message: '请再次输入密码'}, {validator: this.validateConfirm}],
                    email: [{required: true, message: '用户邮箱不能为空'}, {validator: this.validateEmail}],
                }
            }
        },
        methods:{
            submitForm() { //提交
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        alert('注册成功');
                    } else {
                        console.log('校验失败');
                        return false;
                    }
                });
            },
            resetForm() { //重置
                this.$refs.form.resetFields();
            },
            validateConfirm(rule, value, callback) { // 验证确认密码是否与密码一致
                if (value !== this.form.password) {
                    callback(new Error("两次密码不一致"));
                } else {
                    callback();
                }
            },
            validateEmail(rule, value, callback) { // 验证邮箱格式是否正确
                if (value !== '') {
                    if (/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value) === false) {
                        callback(new Error('请输入正确的邮箱格式'));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            }
        }
    })
</script>
</html>